const express = require('express')
const path = require('path')
const fs = require('fs/promises')
// npm i express@4.21.1
const app = express()
// 引入数据
let MONSTER_ARR = require('./data/mons.json')

// 配置静态资源
app.use(express.static(path.resolve(__dirname, './public')))
// 解析post请求
app.use(express.urlencoded({ extended: true }))

/*
    模板引擎：ejs
      1.下载 npm i ejs
      2.配置模板引擎   app.set('view engine', 'ejs')
      3.配置模板引擎路径  app.set('views', path.resolve(__dirname, './views'))

      语法：
          <%=变量%> 以文本的方式输出 不解析html代码
          <%-变量%> 可以解析html代码
          <%js逻辑%> 可以直接写js代码
            <%for(let i=0;i<5;i++){%>
              <h1>
                <%=i%>
                </h1>
            <%}%>


*/
app.set('view engine', 'ejs')
app.set('views', path.resolve(__dirname, './views'))



app.get("/west", (req, res) => {
  // res.send('<h1>欢迎</h1>')
  // render用来渲染模板引擎 并将其返回给浏览器
  res.render('west', {
    mons: MONSTER_ARR
  })
})

app.post('/add-mons', (req, res) => {
  console.log(req.body);
  // id 
  const num = MONSTER_ARR.length
  const id = num > 0 ? MONSTER_ARR[num - 1].id + 1 : 1

  const newMons = {
    id,
    ...req.body
    // name:req.body.name
  }
  // 将新数据添加到数组
  MONSTER_ARR.push(newMons)
  console.log(MONSTER_ARR);
  // 重新写入json文件
  fs.writeFile(path.resolve(__dirname, './data/mons.json'), JSON.stringify(MONSTER_ARR))
    .then(() => {
      // 重定向 告诉浏览器 向west路由重新访问一次请求
      res.redirect('/west')
    })

})


// 删除
app.get('/del', (req, res) => {
  console.log(req.query)
  // 找出对应的id数据
  MONSTER_ARR = MONSTER_ARR.filter(item => item.id != req.query.id)
  // console.log(MONSTER_ARR)
  fs.writeFile(path.resolve(__dirname, './data/mons.json'), JSON.stringify(MONSTER_ARR))
    .then(() => {
      // 重定向 告诉浏览器 向west路由重新访问一次请求
      res.redirect('/west')
    })
})

// 跳转到修改页面
app.get('/updata', (req, res) => {
  // 过滤出对应数据
  let mons = MONSTER_ARR.find(item => item.id == req.query.id)
  res.render('updata', {
    user: mons
  })
})

// 提交修改
app.post('/updata-mons', (req, res) => {
  console.log(req.body);
  let mons = MONSTER_ARR.find(item => item.id == req.body.id)
  mons.name = req.body.name
  mons.age = req.body.age
  mons.sex = req.body.sex
  mons.address = req.body.address

  fs.writeFile(path.resolve(__dirname, './data/mons.json'), JSON.stringify(MONSTER_ARR))
    .then(() => {
      res.redirect('/west')
    })
})

app.listen(4399, () => {
  console.log('启动成功 \n---> http://localhost:4399/  \n ----> http://127.0.0.1:4399');
})